<template>
  <div id="comment">
    <div class="comment-list" v-for="item in data">
      <!-- 评论头像 -->
      <div class="fl comment_img">
        <img :src="item.img" alt="">
      </div>
      <div class="comment_detail">
        <a href="">{{item.username}}</a>：{{item.content}}
      </div>
      <div class="comment_parent">
        <a href="">@{{item.username}}</a>：{{item.content}}
      </div>
      <div class="comment_time">
        <div>{{formatTime(item.time)}} <a class="fr" @click="commentClick">回复</a></div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'comment',
    data() {
      return {}
    },
    props: {
      data: Array
    },
    methods: {
      formatTime(time) {
        return time ? this.$dateFormat(time) : '';
      },
      // 返回顶部
      commentClick(event) {
        // https://blog.csdn.net/qq_24729895/article/details/79049066 (解决返回顶部/底部无效)
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
        if (!document.documentElement.scrollTop) {
          document.body.scrollTop = document.documentElement.scrollHeight;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  $comment: 'comment';

  .#{$comment}_img img {
    margin-top: 5px;
  }

  .#{$comment}_img, .#{$comment}_img img {
    height: 30px;
    width: 30px;
  }

  .#{$comment}_detail {
    margin-left: 40px;
    font-size: 12px;
    a {
      color: #d1694f;
    }
  }
  .#{$comment}_parent {
    @extend .#{$comment}_detail;
    padding: 5px;
    background-color: #666;
    color: #fff;
    border-radius: .25rem;
  }

  .#{$comment}-list {
    display: inline-block;
    margin: 10px 0;
    padding: 0 10px;
  }

  .#{$comment}_time {
    margin-left: 40px;
    font-size: 12px;
    color: #b0b2b7;
  }
</style>
